var $panel;
var timerId;
var $inputTotal;
var total;

$(function() {
	init();
	addHandler();
});

function init() {
	$panel = $("#panel");
	timerId = 0;
	$inputTotal = $("#inputTotal");
	total = 0;
}

function addHandler() {	
	var $btnStart = $("#btnStart");
	$btnStart.bind("click", startTimer);

	var $btnStop = $("#btnStop");
	$btnStop.bind("click", stopTimer);
}

function startTimer() {
	if (timerId == 0) {		
		total = Number($inputTotal.val());
		resetPanelStyle();
		timerId = setInterval(createNumber, 20);
	}
}

function stopTimer() {
	if (timerId) {
		clearInterval(timerId);
		timerId = 0;
		showWinner();
	}
}

function createNumber() {
	var num = 1 + Math.floor(Math.random() * total);
	$panel.html(num);
	$panel.css("font-Size", 100 + (Math.random() * 100));
}

function showWinner() {
	$panel.css({
		color : "#ff0000",
		fontSize : "200px"
	});
}

function resetPanelStyle() {
	$panel.css({
		color : "#000000"
	});
}
